<template>
  <div class="confirmOrderContainer">
    <section v-if="!showLoading">
      <head-top head-title="确认订单" goBack="true" signin-up="confirmOrder"></head-top>
      <router-link
        :to="{
          path: '/confirmOrder/chooseAddress',
          query: { id: checkoutData.cart.id, sig: checkoutData.sig },
        }"
        class="address_container"
      >
        <div class="address_empty_left">
          <svg class="location_icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#location"></use>
          </svg>
          <div class="add_address" v-if="!choosedAddress">请添加一个收货地址</div>
          <div v-else class="address_detail_container">
            <header>
              <span>{{ choosedAddress.name }}</span>
              <span>{{ choosedAddress.sex == 1 ? '先生' : '女士' }}</span>
              <span>{{ choosedAddress.phone }}</span>
            </header>
            <div class="address_detail">
              <span
                v-if="choosedAddress.tag"
                :style="{ backgroundColor: iconColor(choosedAddress.tag) }"
                >{{ choosedAddress.tag }}</span
              >
              <p>{{ choosedAddress.address_detail }}</p>
            </div>
          </div>
        </div>
        <svg class="address_empty_right">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
        </svg>
      </router-link>
      <section class="delivery_model container_style">
        <p class="deliver_text">送达时间</p>
        <section class="deliver_time">
          <p>尽快送达 | 预计 {{ checkoutData.delivery_reach_time }}</p>
          <p v-if="checkoutData.cart.is_deliver_by_fengniao">蜂鸟专送</p>
        </section>
      </section>
      <section class="pay_way container_style">
        <header class="header_style">
          <span>支付方式</span>
          <div class="more_type" @click="showPayWayFun">
            <span>在线支付</span>
            <svg class="address_empty_right">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
            </svg>
          </div>
        </header>
        <section class="hongbo">
          <span>红包</span>
          <span>暂时只在饿了么 APP 中支持</span>
        </section>
      </section>
      <section class="food_list">
        <header v-if="checkoutData.cart.restaurant_info">
          <img :src="imgBaseUrl + checkoutData.cart.restaurant_info.image_path" />
          <span>{{ checkoutData.cart.restaurant_info.name }}</span>
        </header>
        <ul class="food_list_ul" v-if="checkoutData.cart.groups">
          <li v-for="item in checkoutData.cart.groups[0]" :key="item.id" class="food_item_style">
            <p class="food_name ellipsis">{{ item.name }}</p>
            <div class="num_price">
              <span>x {{ item.quantity }}</span>
              <span>¥{{ item.price }}</span>
            </div>
          </li>
        </ul>
        <div class="food_item_style" v-if="checkoutData.cart.extra">
          <p class="food_name ellipsis">{{ checkoutData.cart.extra[0].name }}</p>
          <div class="num_price">
            <span></span>
            <span>¥ {{ checkoutData.cart.extra[0].price }}</span>
          </div>
        </div>
        <div class="food_item_style">
          <p class="food_name ellipsis">配送费</p>
          <div class="num_price">
            <span></span>
            <span>¥ {{ checkoutData.cart.deliver_amount || 0 }}</span>
          </div>
        </div>
        <div class="food_item_style total_price">
          <p class="food_name ellipsis">订单 ¥{{ checkoutData.cart.total }}</p>
          <div class="num_price">
            <span>待支付 ¥{{ checkoutData.cart.total }}</span>
          </div>
        </div>
      </section>
      <section class="pay_way container_style">
        <router-link
          :to="{
            path: '/confirmOrder/remark',
            query: { id: checkoutData.cart.id, sig: checkoutData.sig },
          }"
          class="header_style"
        >
          <span>订单备注</span>
          <div class="more_type">
            <span class="ellipsis">{{
              remarkText || inputText ? remarklist : '口味、偏好等'
            }}</span>
            <svg class="address_empty_right">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
            </svg>
          </div>
        </router-link>
        <router-link
          :to="checkoutData.invoice.is_available ? '/confirmOrder/invoice' : ''"
          class="hongbo"
          :class="{ support_is_available: checkoutData.invoice.is_available }"
        >
          <span>发票抬头</span>
          <span>
            {{ checkoutData.invoice.status_text }}
            <svg class="address_empty_right">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
            </svg>
          </span>
        </router-link>
      </section>
      <section class="confrim_order">
        <p>待支付 ¥{{ checkoutData.cart.total }}</p>
        <p @click="confrimOrder">确认下单</p>
      </section>
      <transition name="fade">
        <div class="cover" v-if="showPayWay" @click="showPayWayFun"></div>
      </transition>
      <transition name="slid_up">
        <div class="choose_type_Container" v-if="showPayWay">
          <header>支付方式</header>
          <ul>
            <li
              v-for="item in checkoutData.payments"
              :key="item.id"
              :class="{ choose: payWayId == item.id }"
            >
              <span
                >{{ item.name
                }}<span v-if="!item.is_online_payment">{{ item.description }}</span></span
              >
              <svg
                class="address_empty_right"
                @click="choosePayWay(item.is_online_payment, item.id)"
              >
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
              </svg>
            </li>
          </ul>
        </div>
      </transition>
    </section>
    <loading v-if="showLoading"></loading>
    <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./confirmOrder.scss"></style>
